<template>
  <div class="forms-details">
    <app-bar type="forms" :data="shareData" back title="阵容分享"></app-bar>
    <div class="content" v-if="!alldataLoading && form">
      <team-box :down="false" :share="false" bottom v-model="form"></team-box>
      <vivo-down></vivo-down>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import TeamBox from "@/components/TeamBox/TeamBox.vue";
export default {
  components: {
    TeamBox,
  },
  name: "FormDetails",
  data() {
    return {
      form: null,
      shareData: null,
    };
  },
  computed: {
    ...mapState("data", ["heroesList", "alldataLoading"]),
  },
  async created() {
    // 发送页面UV统计
    window.injectedAll.sendUv("三国志.战略版搭配");

    let id = this.$route.params.id;
    this.api.FORMS_DETAIL(id).then((res) => {
      this.form = res;
      let hero1;
      let hero2;
      let hero3;
      this.heroesList.forEach((item) => {
        if (item.id === this.form.chef_hero) hero1 = item;
        if (item.id === this.form.sub_hero_one) hero2 = item;
        if (item.id === this.form.sub_hero_two) hero3 = item;
      });
      // 阵容分享文案优化
      // 标题：武将1+武将2+武将3 阵容分享 - Ganke三国志战略版
      // 描述：阵容描述第一句话
      // 图片：主将头像
      this.shareData = {
        title:
          hero1.name +
          "," +
          hero2.name +
          "," +
          hero3.name +
          " 阵容分享 - Ganke三国志战略版",
        description: this.form.name,
        imgurl: hero1.avatar,
      };

      window.shareData = JSON.parse(JSON.stringify(this.shareData));
      window.injectedAll.shareInit();
    });
  },
};
</script>

<style lang="scss" scoped>
.forms-details {
  width: 100%;
  min-height: 100%;
  padding-top: 0.46rem;
  .content {
    padding: 0 0.16rem;
  }
}
</style>
